<template>
  <div class="page-content">
    <!-- banner -->
    <div class="banner">
      <div class="banner-center-box">
        <img class="banner-img" src="@/assets/bmsSp/banner-img.png" alt="">
        <div class="banner-left-box">
          <h2><span>SP</span>-Supplier Partners</h2>
          <p>成为联盟经销商，代理销售全球数据中心</p>
          <p>赠送550美金现金，免费赠送业务管理系统，免费技术支持！</p>
          <span class="banner-btn">立即体验</span>
        </div>
        <div class="banner-right-box"></div>
      </div>
    </div>
    <!-- banner end-->

    <!-- what sp -->
    <div class="introduce-content">
      <div class="introduce-items">
        <img class="introduce-img" src="@/assets/bmsSp/sp-img.png" alt="sp-img">
      </div>
      <div class="introduce-items items-detail">
        <h2 class="introduce-title"><span>什</span>么是SP？</h2>
        <div class="introduce-detail">
          为采购我们硬件及软件并放置在SP自有数据中心，我们将提供
          全管理服务为客户完成部署安装，并将这些资源加入到我们平台，
          最终通过我们平台SP用户实现业务分销。
        </div>
      </div>
    </div>
    <!-- what sp end-->

    <!-- 产品特点 -->
    <div class="content-items-box product-characteristics">
      <div class="product-center-box">
        <div class="box-title">
          <h2>产品特点</h2>
          <div class="e-title">Characteristic</div>
        </div>
        <div class="items-detail-content">
          <div class="items-box">
            <div class="box-top">icon</div>
            <div class="box-bottom">
              <p>高密度硬件 低TCO成本</p>
              <p>低TCO成本件</p>
            </div>
          </div>
          <div class="items-box">
            <div class="box-top">icon</div>
            <div class="box-bottom">
              <p>软件闭环 完善兼容</p>
              <p>完善兼容</p>
            </div>
          </div>
          <div class="items-box">
            <div class="box-top">icon</div>
            <div class="box-bottom">
              <p>生态扶持 产品销售</p>
              <p>4.7*24全管理服务</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品特点 end-->

    <!-- 产品优势 -->
    <div class="content-items-box my-product">
      <div class="product-center">
        <div class="box-title">
          <h2>产品优势</h2>
          <div class="e-title">Superiority</div>
        </div>
        <div class="items-detail-box">
          <div class="product-items">
            <div class="items-left">
              <img class="product-img" src="@/assets/bmsSp/product1.png" alt="">
            </div>
            <div class="items-right product-text">
              <div class="product-title"><span>产</span>品优势一</div>
              <div class="porduct-detail">
                创新链是指围绕某一个创新的核心主体，以满足市场需求为导向， 通过知识创新活动将相关的创新参与主体连接起来，
                以实现知识的 经济化过程与创新系统优化目标的功能链节结构模式 。
              </div>
              <div class="more-btn">了解更多</div>
            </div>
          </div>

          <div class="product-items pad-top">
            <div class="items-left product-text">
              <div class="product-title"><span>产</span>品优势二</div>
              <div class="porduct-detail">
                创新链是指围绕某一个创新的核心主体，以满足市场需求为导向，通过知识创新活动将相关的创新参与主体连接起来，以实现知识的
                经济化过程与创新系统优化目标的功能链节结构模式 。
              </div>
              <div class="more-btn">了解更多</div>
            </div>
            <div class="items-right">
              <img class="product-img" src="@/assets/bmsSp/product2.png" alt="">
            </div>
          </div>

          <div class="product-items pad-top">
            <div class="items-left">
              <img class="product-img" src="@/assets/bmsSp/product3.png" alt="">
            </div>
            <div class="items-right product-text">
              <div class="product-title"><span>产</span>品优势三</div>
              <div class="porduct-detail">
                创新链是指围绕某一个创新的核心主体，以满足市场需求为导向，通过知识创新活动将相关的创新参与主体连接起来，以实现知识的
                经济化过程与创新系统优化目标的功能链节结构模式 。
              </div>
              <div class="more-btn">了解更多</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 产品优势 end -->

    <!-- 联系我们 -->
    <div class="contact-us">
      <div class="contact-title">准备开始了吗？</div>
      <div class="contact-stitle">创建账户或联系我们</div>
      <div class="contact-btn-box">
        <span class="contact-btn active">创建账户</span>
        <span class="contact-btn">联系我们</span>
      </div>
    </div>
    <!-- 联系我们 end -->

  </div>
</template>

<script>
  export default {
    name: 'BmsSp'
  }
</script>

<style type="text/less" lang="less" scoped>
  .page-content{
    color: #333333;
  }
  .banner{
    /*background-image: url("../../assets/index/banner-bg.png");*/
    height: 742px;
    width: 100%;
    background-size: cover;
    color: #333333;
    .banner-center-box{
      position: relative;
      width: 1380px;
      margin: 0 auto;
      padding-top: 230px;
      .banner-img{
        position: absolute;
        right: 100px;
        top: 130px;
        /*width: 400px;*/
      }
      .banner-left-box{
        h2{
          font-size: 45px;
          margin-bottom: 50px;
          span{
            padding-bottom: 9px;
            border-bottom: 3px solid #0C75FE;
            border-radius: 1.5px;
          }
        }
        p{
          font-size: 17px;
          margin-bottom: 5px;
        }
        .banner-btn{
          display: inline-block;
          cursor: pointer;
          margin-top: 20px;
          color: #ffffff;
          font-size: 14px;
          padding: 8px 15px;
          border-radius: 5px;
          background:linear-gradient(0deg,#0B68FE 0%,#3A8BFF 100%);
        }
      }
    }
  }
  .introduce-content{
    width: 1380px;
    margin: 0 auto;
    padding-bottom: 150px;
    display: flex;
    .introduce-items{
      width: 50%;
      &.items-detail{
        padding-top: 180px;
        padding-left: 40px;
      }
      /*.introduce-img{*/
      /*  width: 430px;*/
      /*}*/
      .introduce-title{
        font-size: 24px;
        /*font-weight: bold;*/
        padding-bottom: 15px;
        span{
          border-bottom: 2px solid #FFB71A;
          padding-bottom: 5px;
        }
      }
      .introduce-detail{
        font-size: 16px;
      }
    }
  }

  .content-items-box{
    .box-title{
      text-align: center;
      h2{
        font-size: 28px;
        color: #000;
        font-weight: 400;
      }
      .e-title{
        font-size: 12px;
        letter-spacing: 7px;
        color: #0C6EFF;
      }
    }
    &.product-characteristics {
      .box-title{
        padding: 100px 0 80px 0;
      }
      height: 1100px;
      width: 100%;
      min-width: 1380px;
      background-color: #f2f7fd;
      .product-center-box{
        width: 1380px;
        margin: 0 auto;
      }
      .items-detail-content{
        display: flex;
        justify-content: space-between;
        .items-box{
          width: 353px;
          height: 445px;
          background-color: #ffffff;
          margin-right: 50px;
          &:last-child{
            margin-right: 0;
          }
          .box-top{
            height: 50%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            padding-bottom: 30px;
          }
          .box-bottom{
            display: flex;
            flex-flow: column;
            align-items: center;
            & p{
              font-size: 16px;
            }
            & p:first-child{
              font-size: 20px;
              /*font-weight: bold;*/
            }
          }
        }
      }
    }
  }

  .my-product{
    width: 100%;
    min-width: 1380px;
    padding-top: 20px;
    .product-center{
      width: 1380px;
      margin: 0 auto;
      .items-detail-box{
        /*padding-top: 130px;*/
        display: inline-block;
        width: 100%;
        padding: 130px 20px 0 20px;
      }
      .product-items{
        display: flex;
        /*.product-img{*/
        /*  width: 500px;*/
        /*}*/
        .items-left{
          width: 50%;
          padding-left: 20px;
          &.product-text{
            padding-top: 140px;
            padding-left: 140px;
          }
        }
        .items-right{
          width: 50%;
          &.product-text{
            padding-top: 140px;
            padding-left: 200px;
          }
        }
        &.pad-top{
          padding-top: 60px;
        }
        .product-title{
          color: #0A64FF;
          font-size: 22px;
          /*font-weight: bold;*/
          padding-bottom: 25px;
          span{
            padding-bottom: 6px;
            border-bottom: 2px solid #FFB71A;
          }
        }
        .porduct-detail{
          width: 390px;
          margin-bottom: 20px;
        }
        .more-btn{
          display: inline-block;
          cursor: pointer;
          padding: 5px 20px;
          background:linear-gradient(0deg,rgba(25,202,151,1) 0%,rgba(55,237,205,1) 81%);
          border-radius:6px;
          font-size: 14px;
          color: #ffffff;
        }
      }
    }
  }

  .contact-us{
    background-color: #f2f6ff;
    height: 600px;
    text-align: center;
    padding-top: 270px;
    width: 100%;
    min-width: 1380px;
    .contact-title{
      color: #0A64FF;
      font-size: 28px;
      padding-bottom: 10px;
    }
    .contact-stitle{
      font-size: 26px;
      padding-bottom: 40px;
    }
    .contact-btn-box{
      .contact-btn{
        padding: 8px 15px;
        font-size: 14px;
        color: #0A64FF;
        border-radius: 5px;
        cursor: pointer;
        box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.16);
        &.active{
          background-color: #0A64FF;
          color: #ffffff;
          margin-right: 50px;
        }
      }
    }
  }
  @media (max-width: 1380px) {
    .banner .banner-center-box{
      padding: 230px 20px 0 30px
    }
    .content-items-box.product-characteristics .items-detail-content,
    .introduce-content{
      padding: 0 40px;
    }
  }
</style>